<template>
  <div class="introduce">
    <van-image
      class="img"
      :src="require('../../assets/introduce/banner.jpg')"
    ></van-image>

    <div class="mission">
      <h2 class="h2">
        量准的使命
      </h2>
      <p>用新一代全球领先的纳米等离子共振</p>
      <p>NanoSPR生物芯片微测技术</p>
      <p>建造便捷精准实时全球化健康检测平台</p>
      <p>为广大消费者、医疗机构和医药企业提供更好的</p>
      <p>新药研发，健康管理和疾病检测服务，造福人类！</p>
    </div>

    <div class="company-info">
      <h2 class="h2">
        量准（上海）实业有限公司
      </h2>
      <div class="content">
        <p>量准（上海）实业有限公司成立于2016年12月，是一家包括研发、制造、销售全链的公司。</p>
        <p>量准以“芯片生物测微技术”为主打，目前办公地点分布于上海、武汉、杭州，在武汉光谷有超300平米的研发实验室，并已于上海金山工业区投资建设近1000平米的工厂。</p>
        <p>量准专注于无标记物大分子新药筛选产品以及创新体外快速诊断智能化产品的研发生产，由国家级高层次人才、NanoSPR传感器全球领袖专家，美国医学与生物工程院院士(Fellow)、华中科技大学特聘教授刘钢博士担任首席科学家领衔研发团队，已经拥有包括纳米等离子光学芯片设计和制造等在内的近百项世界领先技术专利。</p>
      </div>
      <div class="company-img">
        <div class="item">
          <van-image
            class="img"
            :src="require('../../assets/introduce/company-1.jpg')"
          ></van-image>
          <div class="title">
            量准上海
          </div>
          <div class="subtitle">
            市场营销整合中心
          </div>
        </div>
        <div class="item">
          <van-image
            class="img"
            :src="require('../../assets/introduce/company-2.jpg')"
          ></van-image>
          <div class="title">
            量准杭州
          </div>
          <div class="subtitle">
            硬件研发中心
          </div>
        </div>
        <div class="item">
          <van-image
            class="img"
            :src="require('../../assets/introduce/company-3.jpg')"
          ></van-image>
          <div class="title">
            上海千级净化工厂
          </div>
          <div class="subtitle">
            光学芯片加工制造中心
          </div>
        </div>
        <div class="item">
          <van-image
            class="img"
            :src="require('../../assets/introduce/company-4.jpg')"
          ></van-image>
          <div class=" title">
            量准武汉
          </div>
          <div class="subtitle">
            生物芯片研发制造实验室
          </div>
        </div>
      </div>
    </div>

    <div class="storey">
      <h2 class="h2">
        发展历程
      </h2>
    </div>

    <div class="time-line">

      <div class="line-box">
        <div class="line">
          <div class="milestone">
            <div class="detail">
              <h3 class="h3">企业发展</h3>
            </div>
          </div>
          <div
            class="milestone"
            v-for="v,i in timeline1"
            :key="i"
          >
            <div class="dot"></div>
            <div class="detail">
              <h4 class="h4">{{v.time}}</h4>
              {{v.content}}
            </div>
          </div>
        </div>
      </div>
      <div class="line-box">
        <div class="line">
          <div class="milestone">
            <div class="detail">
              <h3 class="h3">成果事记</h3>
            </div>
          </div>
          <div
            class="milestone"
            v-for="v,i in timeline2"
            :key="i"
          >
            <div class="dot"></div>
            <div class="detail">
              <h4 class="h4">{{v.time}}</h4>
              {{v.content}}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="storey">
      <h2 class="h2">
        团队实力
      </h2>
    </div>

    <div class="team">
      <div
        class="team-item"
        v-for="v,i in team"
        :key="i"
      >
        <div class="team-top">
          <van-image
            class="img"
            :src="v.img"
          ></van-image>
          <div class="team-title">
            <div class="name">
              {{v.name}}
            </div>
            <div class="state">
              {{v.state}}
            </div>
          </div>
        </div>
        <div
          class="team-info"
          v-html="v.content"
        >
        </div>
      </div>
    </div>

    <div class="storey">
      <h2 class="h2">
        战略合作伙伴
      </h2>
    </div>

    <div class="all-companys">
      <div
        class="company-item"
        v-for="v,i in logo"
        :key="i"
      >
        <van-image
          class="img"
          :src="v.img"
        ></van-image>
        <!-- <div
          class="company-name"
          v-html="v.name"
        >
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      timeline1: [
        {
          time: "2018.03.28",
          content: "量准(武汉)生命科技有限公司成立",
        },
        {
          time: "2017.10.18",
          content:
            "量准（上海）医疗器械有限公司成立（千级工厂-光学芯片加工制造）",
        },
        {
          time: "2017.02.23",
          content: "杭州量准健康管理有限公司成立（杭州硬件研发中心）",
        },
        {
          time: "2016.12.28",
          content: "量准（上海）实业有限公司成立",
        },
        {
          time: "2016.01.12",
          content: "量准（上海）医疗科技有限公司成立（市场营销整合中心）",
        },
        {
          time: "2014.12",
          content: "量准美国研发中心LIFEDISC,LLC成立",
        },
      ],
      timeline2: [
        {
          time: "2020",
          content: "世界级晶圆生物芯片及其应用问世",
        },
        {
          time: "2019.10.23",
          content:
            "量准携手“2018年诺贝尔生理学或医学奖获得者”本庶佑教授于武汉成立“本庶佑量准诺贝尔奖工作站”",
        },
        {
          time: "2019.09.26",
          content: "佑蜜电子优孕宝斩获2019金麦母婴类品质大奖",
        },
        {
          time: "2019.01.01",
          content: "推出首款女性优孕伴侣-佑蜜电子优孕宝",
        },
        {
          time: "2018.06.18",
          content:
            "正式聘请哈佛大学工学院执行院长、国际光学传感器顶级专家Fawaz Habbal教授为首席科学顾问",
        },
      ],
      team: [
        {
          img: require("../../assets/introduce/team-1.jpg"),
          name: "刘钢",
          state: "创始人&首席科学家",
          content:
            "加州大学伯克利分校/生物工程博士；旧金山分校/细胞和分子医学博士；曾任伊利诺伊大学香槟分校教授",
        },
        {
          img: require("../../assets/introduce/team-2.jpg"),
          name: "许浩",
          state: "创始人&董事长",
          content:
            "厦门大学/化学学士；连续创业者，从业经验横跨500强；外资，民企，百亿国企，PEVC，实业和互联网",
        },
        {
          img: require("../../assets/introduce/team-3.jpg"),
          name: "Fawaz Habbal",
          state: "首席科学顾问",
          content: "美国宝丽来相机公司前副总裁；CMOS成像传感器专家",
        },
        {
          img: require("../../assets/introduce/team-4.jpg"),
          name: "毛晨",
          state: "首席药物学家",
          content: "国家级高层次人才；康奈尔大学/化学博士",
        },
        {
          img: require("../../assets/introduce/team-5.jpg"),
          name: "胡文君",
          state: "首席生化研究",
          content: "日本京都大学医学博士；师从2018年诺贝尔医学奖得主本庶佑",
        },
        {
          img: require("../../assets/introduce/team-6.jpg"),
          name: "黄丽萍",
          state: "产品研发总监",
          content: "中国药科大学药学博士；华中科技大学博士后",
        },
      ],
      logo: [
        {
          name: "武汉新芯集成电路制造有限公司",
          img: require("../../assets/introduce/logo-1.jpg"),
        },
        {
          name: "台积电",
          img: require("../../assets/introduce/logo-2.jpg"),
        },
        {
          name: "华中科技大学",
          img: require("../../assets/introduce/logo-3.jpg"),
        },
        {
          name: "上海市（复旦大学附属）公共卫生临床中心",
          img: require("../../assets/introduce/logo-4.jpg"),
        },
        {
          name: "维亚生物科技控股集团",
          img: require("../../assets/introduce/logo-5.jpg"),
        },
        {
          name: "中科新生命",
          img: require("../../assets/introduce/logo-6.jpg"),
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.introduce {
  .storey {
    padding: 20px 15px;
  }
  .img {
    width: 100%;
  }

  .mission {
    padding: 30px 15px;
    text-align: center;
    .h2 {
      margin-bottom: 15px;
    }
    p {
      font-size: 12px;
      line-height: 20px;
    }
  }
  .h2 {
    position: relative;
    font-size: 18px;
    color: #4278bc;
    font-weight: bold;
    text-align: center;
  }

  .h2:after {
    width: 18px;
    height: 1px;
    background: rgba($color: #333333, $alpha: 0.5);
    content: " ";
    position: absolute;
    top: 25px;
    left: 50%;
    margin-left: -9px;
  }

  .company-info {
    padding: 15px;
    background-color: #4278bc;
    .h2 {
      color: #fff;
    }
    .h2:after {
      background: rgba($color: #fff, $alpha: 0.5);
    }
    .content {
      font-size: 12px;
      padding: 15px;
      color: #fff;
      p {
        margin-top: 5px;
        text-indent: 2em;
      }
    }
    .company-img {
      display: grid;
      grid-template-columns: repeat(2, 50%);
      grid-row-gap: 15px;
      margin: 10px 20px;
      .item {
        text-align: center;
        color: #fff;
      }
      .img {
        width: 100px;
        height: 100px;
        overflow: hidden;
        border-radius: 50%;
      }
      .title {
        font-size: 14px;
      }
      .subtitle {
        font-size: 12px;
      }
    }
  }

  .time-line {
    display: grid;
    grid-template-columns: repeat(2, 49%);
    grid-column-gap: 10px;
    margin: 0 15px;
    .line-box {
      background: #f2f2f2;
      padding: 15px;
      .line {
        border-left: 1px solid #091023;
      }
      .milestone {
        position: relative;
        left: -3px;
        margin-top: 15px;
        .h3 {
          color: #4278bc;
          font-weight: bold;
          font-size: 14px;
        }
        .dot {
          position: absolute;
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #4278bc;
          top: 4px;
        }
        .detail {
          margin-left: 10px;
          display: inline-block;
          color: #3e464f;
          font-size: 12px;
          .h4 {
            font-weight: bold;
          }
        }
      }
    }
  }

  .team {
    display: grid;
    grid-template-columns: repeat(2, 49%);
    grid-column-gap: 10px;
    margin: 0 15px;
    &-item {
      margin-bottom: 15px;
      background: #4278bc;
      color: #fff;
      padding: 7px;
    }
    &-title {
      margin-left: 5px;
      padding-top: 10px;
    }
    &-top {
      display: flex;
      .name {
        font-weight: bold;
        font-size: 14px;
      }
      .state {
        font-size: 12px;
      }
      .img {
        width: 55px;
        height: 55px;
        overflow: hidden;
        border-radius: 50%;
      }
    }
    &-info {
      margin-top: 10px;
      font-size: 12px;
      p {
        line-height: 18px;
      }
    }
  }

  .all-companys {
    padding: 0 15px 30px;
    display: grid;
    grid-template-columns: repeat(3, 31.5%);
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    .company-name {
      font-size: 12px;
      text-align: center;
    }
  }
}
</style>
